<template>
	<view>
		<view>
			<fui-tabs :tabs="tabs" :current="tabIndex" :sliderBackground="'#FFDD00'" :selectedColor="'#000'" :size="24"
				:short="false" scroll @change="changeTabs"></fui-tabs>
		</view>

		<swiper :current="tabIndex" :duration="300" @change="tabChange" :style="{height:height+'px'}">
			<swiper-item class="fui-swiper__item" v-for="(itm , idx) in tabs.length" :key="idx">
				<scroll-view scroll-y :style="{height:height+'px'}" @scrolltolower="onPullUpLoading()">
					<view class="row-center marginTop-50" v-if="NoticeList.length == 0">
						<view class="">
							<image :src="baseUrl + 'icon/null.png'" mode="widthFix"></image>
							<view class="text-align-center">
								暂无相关报名
							</view>
						</view>
					</view>
					<view v-else>
						<view class="indexBox" v-for="(item,key) in NoticeList" :key="key"
							@click="$common.goNavPage('/notice/details?NoticeID='+item.NoticeID)">
							<view class="flexbc">
								<view class="noticeTitle">
									{{ item.ClassName }}
									{{ JSON.parse(item.PriceType).result }}
								</view>
								<view class="disflex ai-center">
									<fui-icon name="location" :size="30"></fui-icon>
									<text class="marginLeft-10 paddingBottom-5"
										style="color:#999;">{{ item.City? item.City : '全国' }}</text>
								</view>
							</view>
							<view class="flexbc">
								<view class="leftTexts">
									<view class="noticeMemo">{{item.NoticeMemo}}</view>
									<view class="userlabel">
										{{ JSON.parse(item.Roles).text }}
									</view>
									<view class="userInfo">
										<view class="userHeadPic">
											<image :src="item.PublicWxHeadPic"></image>
										</view>
										<view class="userNicker">{{item.PublicNickName}}</view>
									</view>
								</view>
							</view>
							<view class="indexBoxBottom flexbc">
								<view>报名时间：{{ item.addTime }}</view>
							</view>
						</view>
						<uni-load-more :status="more"></uni-load-more>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<fui-loading isFixed isMask v-if="isloading"></fui-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isloading: false,
				tabs: [{
						index: -1,
						name: '全部'
					},
					{
						index: 0,
						name: '待处理'
					},
					{
						index: 1,
						name: '待评价'
					},
					{
						index: 2,
						name: '合作完成'
					}
				],
				NoticeList: [],
				SignupState: -1,
				page: 1,
				height: 0,
				tabIndex: 0,
				more: '',
				baseUrl: ''
			}
		},
		onLoad() {
			this.baseUrl = this.$baseUrl;
			this.page = 1;
			this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(100);
			this.loadData();
		},
		methods: {
			onPullUpLoading() {
				this.page += 1;
				this.loadData();
			},
			tabChange(event) {
				this.page = 1;
				this.NoticeList = [];
				this.tabIndex = event.detail.current;
			},
			loadData() {
				uni.showLoading({
					title: ''
				})
				// this.isloading = true;
				this.more = 'loading';
				this.$httpost('/UserCenter/MySignupedNotice', {
					SignupState: this.SignupState,
					page: this.page
				}).then(res => {
					// console.log('接口返回数据', res);
					if (res.code == 200) {
						if (this.NoticeList.length != 0) {
							this.NoticeList = [...this.NoticeList, ...res.data];
							if (res.data.length == 0) this.more = 'onMore';
						} else {
							this.NoticeList = res.data;
							this.more = '';
						}
						// this.isloading = false;
						uni.hideLoading()
					}
				});
			},
			changeTabs(e) {
				// console.log(e)
				this.page = 1;
				this.NoticeList = [];
				this.SignupState = e.index;
				this.loadData();
			}
		}
	}
</script>

<style lang="scss">
	.List {
		background: #FFF;
		padding: 20rpx;
		border-bottom: 1px solid #CCC
	}

	.indexBox {
		margin: auto;
		margin-top: 20rpx;
		width: auto;
		height: auto;
		background-color: #FFF;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.noticeTitle {
		font-size: 32rpx;
		color: #333;
		font-weight: bold
	}

	.noticeMemo {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #999;
		padding-right: 30rpx;
	}

	.userlabel {
		display: flex;
		margin-top: 20rpx;
		/* justify-content:center; */
	}

	.userlabel view {
		background-color: #e0e0e0;
		color: #666;
		font-size: 18rpx;
		margin-right: 10rpx;
		border-radius: 4rpx;
		padding: 6rpx 10rpx 6rpx 10rpx;
	}

	.userInfo {
		display: flex;
		margin-top: 20rpx;
		align-items: center;
	}

	.userHeadPic {
		width: 45rpx;
		height: 45rpx;
		background-color: #00cbff;
		border-radius: 50rpx;
	}

	.userHeadPic image {
		width: 45rpx;
		height: 45rpx;
		border-radius: 50rpx;
	}

	.userNicker {
		margin-left: 10rpx;
	}

	.rightPic {
		width: 160rpx;
		height: 160rpx;
		background-color: #CCC;
		// background-image: url('https://hbimg.huabanimg.com/e2f264f714b5e59a899535cb423bd1bd8498ef1e1184cb-eowWX4_fw658');
		background-size: cover;
		background-position: center;
		border-radius: 10rpx;
		margin-top: 10rpx;
	}

	.rightPic image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
	}

	.indexBoxBottom {
		clear: both;
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid #f0f0f0;
		color: #CCC;
		font-size: 24rpx
	}

	.indexBoxCount {
		width: 220rpx;
		font-size: 24rpx
	}

	.getBaoming {
		width: 120rpx;
		text-align: center;
	}

	.readcount {
		width: 100rpx;
		text-align: center;
	}

	.publicBottom {
		position: fixed;
		bottom: 0rpx;
		width: 100vw;
		height: 100rpx;
		background-color: #FFF;
	}
</style>